<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"	
	xmlns:pe="http://primefaces.org/ui/extensions"	
	xmlns:of="http://omnifaces.org/functions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{clienteBean.initializeForm(param.clienteId)}" type="preRenderView"/>
	
	<style>
		.panel100 {
			width:100px;
		}
		
		.panel400 {
			width:400px;
		}
		
		.panel150{
			width:150px;
		}
		
		.panel350 {
			width:350px;
		}
	
		.panel80 {
			width:80px;
		}
		
		.panel200 {
			width:200px;
		}
		
		.panel250 {
			width:250px;
		}
		
		.panel20 {
			width:20px;
		}
		
		.panel100 {
			width:100px;
		}
		
		.panel120 {
			width:120px;
		}
		.panel97 {
			width:97px;
		}
		
		.panel145 {
			width: 145px;
		}
	
	</style>
</ui:define>


	
	<ui:define name="pageName">Detalhe de Cliente</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Editar" style="height:28px;" action="#{clienteBean.changeToEdit}" icon="ui-icon-pencil"/>
		<p:commandButton value="Excluir" style="height:28px;" onclick="popupConfirmDeleteDetail.show()" icon="ui-icon-trash"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{clienteBean.changeToList}" process="@this" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>
	
	<ui:define name="content">	
		<p:panel>
			<div>
				<p:messages id="messageFormCliente" autoUpdate="true" closable="true"/>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel100, panel400, panel150">
					<h:outputText style="font-weight:bold;" value="Código" />
					<h:outputText style="font-weight:bold;" value="Nome" />
					<h:outputText style="font-weight:bold;" value="Data de nascimento" />
					<h:outputText style="font-weight:bold;" value="Sexo" />
					
					<h:outputText value="#{clienteBean.currentCliente.id}"/>
					<h:outputText value="#{of:abbreviate(clienteBean.currentCliente.nome, 75)}"/>
					<h:outputText value="#{clienteBean.currentCliente.dataNascimento}">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</h:outputText>
					<h:outputText value="#{clienteBean.currentCliente.sexo}"/>
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel350, panel80, panel120">
					<h:outputText style="font-weight:bold;" value="Logradouro" />
					<h:outputText style="font-weight:bold;" value="Número" />
					<h:outputText style="font-weight:bold;" value="Complemento" />
					<h:outputText style="font-weight:bold;" value="Bairro" />
									
					<h:outputText value="#{clienteBean.currentCliente.logradouro}"/>
					<h:outputText value="#{clienteBean.currentCliente.numero}"/>
					<h:outputText value="#{clienteBean.currentCliente.complemento}"/>
					<h:outputText value="#{clienteBean.currentCliente.bairro}"/>
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel150, panel200, panel200">			
					<h:outputText style="font-weight:bold;" value="CEP" />
					<h:outputText style="font-weight:bold;" value="Cidade" />	
					<h:outputText style="font-weight:bold;" value="Estado" />	
					<h:outputText style="font-weight:bold;" value="País" />		
					
					<h:outputText value="#{clienteBean.currentCliente.cep}"/>
					<h:outputText value="#{clienteBean.currentCliente.cidade.cidade}"/>
					<h:outputText value="#{clienteBean.currentCliente.cidade.estado.estado}"/>	
					<h:outputText value="#{clienteBean.currentCliente.cidade.estado.pais.pais}"/>				
				</h:panelGrid>
					
				<h:panelGrid columns="5" style="padding:5px;" columnClasses="panel20, panel97, panel20, panel100">			
					<h:outputText style="font-weight:bold;" value="Telefone" />		
					<h:outputText value="" />	
					<h:outputText style="font-weight:bold;" value="Celular" />	
					<h:outputText value="" />		
					<h:outputText style="font-weight:bold;" value="E-mail" />
					
   					<h:outputText value="#{clienteBean.currentCliente.cidade.ddd}"/>					
					<h:outputText value="#{clienteBean.currentCliente.telefone}"/>
					<h:outputText value="#{clienteBean.currentCliente.cidade.ddd}"/>	
					<h:outputText value="#{clienteBean.currentCliente.celular}"/>
					<h:outputText value="#{clienteBean.currentCliente.email}"/>				
				</h:panelGrid>
				
				<h:panelGrid columns="2" style="padding:5px;" columnClasses="panel150, panel145">			
					<h:outputText style="font-weight:bold;" value="RG" />
					<h:outputText style="font-weight:bold;" value="CPF" />	
					
					<h:outputText value="#{clienteBean.currentCliente.rg}"/>
					<h:outputText value="#{clienteBean.currentCliente.cpf}">
						<f:converter converterId="cpfConverter" /> 
					</h:outputText>
				</h:panelGrid>
			</div>
		</p:panel>			
	</ui:define>
	<ui:define name="popups">
		<ui:include src="listCidade.xhtml"/>
		
		<p:dialog appendToBody="true" modal="true" closable="false" widgetVar="popupConfirmDeleteDetail"
			width="300" resizable="false" header="Confirmação de exclusão" height="90">
			<h:form>
				<div style="margin-top: 10px;">
					<h:outputText value="Confirma a exclusão do registro?"/>
				</div>
				<div align="right" style="margin-top: 15px; margin-bottom: 15px;">
					<p:commandButton value="Excluir" actionListener="#{clienteBean.removeFromDetail}" oncomplete="popupConfirmDeleteDetail.hide()" icon="ui-icon-trash"/>
					<p:commandButton value="Cancelar" onclick="popupConfirmDeleteDetail.hide()" icon="ui-icon-cancel"/>
				</div>		
			</h:form>			
		</p:dialog>
		
		<p:dialog id="completeDialogDelete" header="Confirmação de exclusão" closable="false"
			widgetVar="completeDeletePopup" width="300" resizable="false">
			<h:form>
			<div style="margin-top: 10px;">Excluído com sucesso!</div>
			
			<div align="right" style="margin-top: 15px; margin-bottom: 15px;" > 
				<p:commandButton id="complete" value="Fechar" oncomplete="completeDeletePopup.hide()" icon="ui-icon-close" 
					action="#{clienteBean.changeToList}" />
			</div>
			</h:form>
		</p:dialog>
	</ui:define>
</ui:composition>